<template lang="jade">
#book-info
  //- .header
    a.backup.icon-angle-left(href='javascript:history.go(-1)')
    h1.page-title 图书详情
  .seperate
  .book-info-main(v-if='book')
    .book-details
      .weui-media-box.weui-media-box_appmsg
        .weui-media-box__hd
          img.weui-media-box__thumb(:src='book.biblio.COVER')
        .weui-media-box__bd
          h3.books-name {{book.biblio.TITLE}}
          .author 作者: {{book.biblio.AUTHOR}}
          .type 类别: {{book.biblio.SUBJECT}}
          .type ISBN: {{book.biblio.ISBN}}
          .publishing-company {{book.biblio.PUBLISHER}} / {{book.biblio.PUBDATE}}
          p.text-right
            //- a.weui-btn.weui-btn_mini.btn_clear.douban.icon-share(@click='godouban')  豆瓣书评
            a.weui-btn.weui-btn_mini.weui-btn_plain-primary(@click='reserve') 预约
          //- ul.medias.clearfix
            li.favour #[i.icon-thumbs-up]
            li.share #[i.icon-share]
            li.collect #[i.icon-heart-empty]
            li.comment #[i.icon-edit]
    .page-tabs.personal-data-tabs.weui-flex
      a.weui-flex__item(@click='switchTab(0)', :class='{active: currentTab === 0}') 内容简介
      a.weui-flex__item(@click='switchTab(1)', :class='{active: currentTab === 1}') 馆藏信息
      // a.weui-flex__item(@click='switchTab(2)', :class='{active: currentTab === 2}') 所有评论
    .book-intro(v-if='currentTab === 0')
      .book-item
        .form-item.weui-flex
          label 尺寸
          .weui-flex__item {{book.biblio.BOOKSIZE}}
        .form-item.weui-flex
          label ISBN
          .weui-flex__item {{book.biblio.ISBN}}
        .form-item.weui-flex
          label 页数
          .weui-flex__item {{book.biblio.PAGE}}
        .form-item.weui-flex {{book.biblio.SUMMARY}}
    .book-lib-info(v-if='currentTab === 1')
      .book-amounts.form-item 馆藏复本数: {{book.holding.length}} 本
      .book-item(v-for='item in book.holding')
        .book-name.form-item {{book.biblio.TITLE}}
        .form-item.weui-flex
          label 单册状态
          .weui-flex__item {{statusName(item.STATUS)}}
        .form-item.weui-flex
          label 索书号
          .weui-flex__item {{item.CALLNO}}
        .form-item.weui-flex
          label 条码号
          .weui-flex__item {{item.BARCODE}}
        .form-item.weui-flex
          label 当前馆藏地
          .weui-flex__item {{item.CURLIBNAME}}
        //.form-item.weui-flex
          label 请求数
          .weui-flex__item {{item.LOANCOUNT}}

  .loading(v-else)
    center 正在加载...
</template>

<script>
import api from '../../api-new'

export default {
  data () {
    return {
      currentTab: 0,
      bookId: this.$route.params.bookId,
      book: null
    }
  },
  mounted () {
    this.load()
  },
  methods: {
    statusName (status) {
      if (status === 'LOANED') {
        return '借出'
      } else if (status === 'HOLDING') {
        return '在馆'
      } else {
        return '未知'
      }
    },
    load () {
      api.bookInfo(this.bookId)
        .then(data => {
          console.log(data)
          this.book = data
        })
        .catch(error => {
          console.log(error)
          window.alert('加载失败')
        })
    },
    switchTab (index) {
      this.currentTab = index
    },
    reserve () {
      const patronId = window.localStorage.getItem('loginId')
      if (patronId && patronId.length !== 0) {
        api.reserve({
          bookrecno: this.bookId,
          patronId
        })
          .then(resp => {
            window.alert('预约成功')
          })
          .catch(err => window.alert(err.message))
      } else {
        window.alert('请先登录')
        // this.$router.push({name: 'login'})
        this.$router.push({
          name: 'login',
          params: {
            redirect: 'bookInfo',
            params: {
              bookId: this.$route.params.bookId
            }
          }
        })
        return
      }
    },
    godouban () {
      if (!this.book.biblio.ISBN) {
        window.alert('豆瓣没有此书目')
        return
      }
      api.getDouban(this.book.biblio.ISBN)
        .then((link) => {
          this.$router.push({
            name: 'webview',
            params: {
              title: '豆瓣书评',
              link: link
            }
          })
        })
        .catch(reps => {
          window.alert('豆瓣没有此书目')
          // this.$router.back()
        })
    }
  }
}
</script>

<style lang='scss'>
.book-intro {
  border-top: 1px solid #e5e5e5;
}
.btn_clear, .btn_clear:after {
  border: none;
}
.douban {
  color: #666;
}
</style>
